<template>
  <div>
    <el-tree
      ref="tree"
      :data="tableData"
      show-checkbox
      node-key="id"
      default-expand-all
      check-strictly
      :default-expanded-keys="[2, 3]"
      :default-checked-keys="defaultKeys"
      :props="defaultProps"
    />
    <el-button type="primary" size="small" @click="hSubnit">确定</el-button>
    <el-button size="small">取消</el-button>
  </div>
</template>

<script>
var arrayToTree = require('array-to-tree')
// import { tranListToTreeData } from '@/utils'
import { getPermissionList } from '@/api/permisson'
import { getRoleDetail, assignPerm } from '@/api/settings'
export default {
  name: 'HrSetper',

  data() {
    return {
      tableData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      id: '',
      defaultKeys: []
    }
  },
  created() {
    this.loadPer()
  },
  mounted() {

  },

  methods: {
    async loadPer() {
      const res = await getPermissionList()
      // this.tableData = tranListToTreeData(res.data)
      //   console.log(this.tableData, res.data, 666)
      this.tableData = arrayToTree(res.data, {
        parentProperty: 'pid',
        customID: 'id'
      })
      // 获取当前角色所拥有的的权限
      this.loaRoleDetail()
    },
    async loaRoleDetail() {
      const res = await getRoleDetail(this.id)
      this.defaultKeys = res.data.permIds
    //   console.log(res)
    },
    async hSubnit() {
      const permIds = this.$refs.tree.getCheckedKeys()
      const res = await assignPerm({
        id: this.id,
        permIds
      })
      this.$emit('success')
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
